<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="nav-btn" @click="goToHome">
        <image class="nav-icon" src="/static/logo/返回.png"></image>
      </view>
      <text class="nav-title">道教武功</text>
      <view class="nav-btn">
        <image class="nav-icon" src="/static/logo/更多.png"></image>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-container">
      <uni-search-bar
          class="search-bar"
          radius="100"
          placeholder="搜索武功内容"
          bg-color="#f5f5f5"
          clearButton="auto"
          cancelButton="none"
          @confirm="search"
      />
    </view>

    <!-- 主横幅 -->
    <view class="banner" @click="goToDetail('banner')">
      <image class="banner-image" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E5%A4%A7%E5%9B%BE.png"></image>
      <view class="banner-content">
        <text class="banner-title">道法自然与山水天成</text>
        <text class="banner-desc">成都大运会和青城山武功相逢</text>
      </view>
    </view>

    <!-- 热门视频横向滚动 -->
    <view class="section">
      <text class="section-title">热门视频</text>
      <scroll-view
          class="video-scroll"
          scroll-x
          show-scrollbar="false"
          scroll-with-animation
      >
        <view
            class="video-card"
            v-for="(video, index) in hotVideos"
            :key="index"
            @click="playVideo(video.id)"
        >
          <image class="video-thumb" :src="video.image" mode="aspectFill"></image>
<!--          <view class="video-tag" v-if="video.tag">{{video.tag}}</view>-->
          <view class="video-info">
            <text class="video-title">{{video.title}}</text>
            <text class="video-desc">{{video.desc}}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐内容 -->
    <view class="section">
      <text class="section-title">为你推荐</text>
      <view class="recommend-grid">
        <view
            class="recommend-card"
            v-for="(item, index) in recommends"
            :key="index"
            @click="goToDetail(item.id)"
        >
          <image class="recommend-image" :src="item.image" mode="aspectFill"></image>
          <view class="recommend-info">
            <text class="recommend-title">{{item.title}}</text>
            <text class="recommend-desc">{{item.desc}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      hotVideos: [
        {
          id: 1,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%911.1.png",
          title: "青城功夫表演",
          desc: "灵动的舞台，心灵的归属",

        },
        {
          id: 2,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%911.2.png",
          title: "青城太极",
          desc: "营养有方，青城太极",
          tag: "热门"
        },
        {
          id: 3,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%911.3.png",
          title: "青城功夫表演",
          desc: "灵动的舞台，心灵的归属",
          tag: "精选"
        }
      ],
      recommends: [
        {
          id: 4,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%912.1.png",
          title: "练习青城功夫",
          desc: "民族的，世界的"
        },
        {
          id: 5,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%912.2.png",
          title: "练习青城功夫",
          desc: "民族的，世界的"
        },
        {
          id: 6,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%912.3.png",
          title: "万人太极",
          desc: "阴阳结合，情感如潮，演绎无限"
        },
        {
          id: 7,
          image: "http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%AD%A6%E5%8A%9F/%E8%A7%86%E9%A2%912.4.png",
          title: "万人太极",
          desc: "阴阳结合，情感如潮，演绎无限"
        }
      ]
    }
  },
  methods: {
    goToHome() {
      uni.switchTab({
        url: '/pages/home/home'
      })
    },
    search() {
      // 搜索功能实现
      console.log('搜索内容:', this.searchText)
    },
    playVideo(id) {
      uni.navigateTo({
        url: `/pages/video/player?id=${id}`
      })
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f9f9f9;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  .nav-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
  }

  .nav-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}

/* 搜索栏 */
.search-container {
  padding: 10px 15px;

  .search-bar {
    border-radius: 20px;
  }
}

/* 主横幅 */
.banner {
  position: relative;
  margin: 0 15px 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  .banner-image {
    width: 100%;
    height: 180px;
    display: block;
  }

  .banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;

    .banner-title {
      font-size: 18px;
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

    .banner-desc {
      font-size: 12px;
      opacity: 0.9;
    }
  }
}

/* 分区样式 */
.section {
  margin: 20px 15px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    display: block;
  }
}

/* 热门视频横向滚动 */
.video-scroll {
  white-space: nowrap;
  width: 100%;

  .video-card {
    display: inline-block;
    width: 150px;
    margin-right: 12px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    vertical-align: top;

    &:last-child {
      margin-right: 0;
    }
  }

  .video-thumb {
    width: 100%;
    height: 100px;
    display: block;
  }

  .video-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #3a8d5c;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
  }

  .video-info {
    padding: 10px;

    .video-title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .video-desc {
      font-size: 12px;
      color: #999;
      display: block;
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

/* 推荐内容网格 */
.recommend-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .recommend-card {
    width: 48%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .recommend-image {
    width: 100%;
    height: 100px;
    display: block;
  }

  .recommend-info {
    padding: 10px;

    .recommend-title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      display: block;
    }

    .recommend-desc {
      font-size: 12px;
      color: #999;
      display: block;
      margin-top: 4px;
    }
  }
}
</style>
